<template>
  <view class="set-options-2">
    <view class="date-selection">
      弹窗日期选择：
      <view class="date-selection-item" @click="openPopup('YMD')">{{
        `${date[0]}年${date[1]}月${date[2]}日`
      }}</view>
      <view class="date-selection-item" @click="openPopup('M')">{{
        `${date[1]}月`
      }}</view>
      <view class="date-selection-item" @click="openPopup('D')">{{
        `${date[2]}日`
      }}</view>
    </view>
    <view class="date-selection">
      时间范围显示：
      <view class="date-selection-item hide-bg">{{ dataRange[0] }}</view>
      至
      <view class="date-selection-item hide-bg">{{ dataRange[1] }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
const year = ref(new Date().getFullYear());
const month = ref(new Date().getMonth());
const day = ref(new Date().getDate());
const date = ref([year.value, month.value + 1, day.value]);
const dataRange = ref(["xxxx-xx-xx", "xxxx-xx-xx"]);

// 打开日期选择
const openPopup = (opt) => {
  uni.$emit("openPopupDate", {
    msg: "openPopupDate001",
    initDate: date.value,
    optional: opt,
  });
  // console.log("打开日期选择弹窗", date.value);
};
// 获取确认时间显示
uni.$on("dateChange", (dateArray) => {
  // console.log("选择日期结果", dateArray);
  if (dateArray.length == 3) {
    date.value = dateArray;
  } else {
    dataRange.value = dateArray;
  }
});
</script>

<style scoped lang="less">
.set-options-2 {
  // height: 80rpx;
  padding: 10rpx 20rpx;
  display: flex;
  flex-direction: column;
  background: #eee;
  .date-selection {
    width: 100%;
    margin: 5rpx 0;
    font-size: 26rpx;
    display: flex;
    justify-content: start;
    align-items: center;
    .date-selection-item {
      margin: 0 10rpx;
      background: #0091ff;
      padding: 10rpx 20rpx;
      border-radius: 10rpx;
      color: #fff;
      &.hide-bg {
        background: none;
        color: #000;
      }
    }
  }
}
</style>
